/**************************************************************/
/***Standard***************************************************/
/**************************************************************/
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
  margin-top:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  padding-top:0;
  
}

html, body{
      height:100%;
}
A:link {text-decoration: none; color: #333;}
A:visited {text-decoration: none; color: #333;}
A:active {text-decoration: none; color: #333;}
A:hover { 

}
hr{
    width:100%;
    float:left;
}
.link{
    cursor:pointer;
}
.link:hover{
    text-decoration:underline;
}
.focus{
    color:#00f;
    font-weight:bold;
    
}
h2{
font:normal normal normal 15px 'Lucida Grande', 'Myriad Pro', Helvetica, Arial, Geneva, Verdana, sans-serif;
color:white;
margin-top:0px;
margin-bottom:2px;
text-align: center;
}
h2 span{
    color:grey;
    margin-left:10px;
    margin-right:10px;
}
h3{
   font:normal normal normal 15px 'Lucida Grande', 'Myriad Pro', Helvetica, Arial, Geneva, Verdana, sans-serif;
   font-weight:bold;
   margin-top:0px;
   margin-bottom:2px;
   text-align: left;
   width:560px;
   float:left;
}
span,p{
    font: normal  15px 'Lucida Grande', 'Myriad Pro', Helvetica, Arial, Geneva, Verdana, sans-serif;

}
.liTrack{
    width:520px;
    float:left;
}
.liTrack img{
    margin-right:5px;
    margin-left: 5px;
    height:15px;
    width:15px;
    float:left;
}
.liTrack span{
    min-height:19px;
    width:260px;
    display:block;
    float:left;
    background-color:inherit;
}

.hide{
    display:none;
}
.expand{
    height:15px;
    width:100%;
    background-image: url('expand_icon_arrows.gif');
    background-position: right;
    background-repeat: no-repeat;
    position:relative;
    float:left;
}
.collaps{
    height:15px;
    width:100%;
    background-image: url('collaps_icon_arrows.gif');
    background-position: right;
    background-repeat: no-repeat;
    position:relative;
    float:left;
}
/**************************************************************/
/*****Body*****************************************************/
/**************************************************************/
body{
	background-image:url(background2.png);	
	font:normal normal normal 15px 'Lucida Grande', 'Myriad Pro', Helvetica, Arial, Geneva, Verdana, sans-serif;
}
#main{
    
    width:830px;
    margin:0 auto;
    margin-top:20px;
}
/***************************************************************/
/******Top******************************************************/
/***************************************************************/
#top{
    border-bottom-color:#000000;
    border-bottom-style:solid;
    border-bottom-width:1px;;	
    height:125px;
    margin-left:auto;
    margin-right:auto;
    background-image:url(http://kineticshadows.com/css/images/tile-portfolio.png);
    width:100%;
}
#blackbar{
    height:50px;	
    width:auto;
    background-image: url(http://kineticshadows.com/css/images/tile-nav.png);
    background-repeat: repeat-x;
    margin-top:0px;
    -moz-box-shadow: 0 0 5px 2px #888;
    -webkit-box-shadow: 0 0 5px 2px#888;
    box-shadow: 0 0 5px 2px #888;	
}
#logo{
    float:left;
    display:block;
    margin:0 auto;
    width:410px;
    height:130px;
}
/*********************************************************************/
/******Search bar*****************************************************/
/*********************************************************************/
#searchbar{
	width:400px;
	height:30px;
	margin-left: 15%;
}

#searchButton{
	width:75px;
	height:34px;
	margin-left:5px;
	padding: 6px 10px;
	-webkit-border-radius: 2px 2px;
	border: solid 1px rgb(153, 153, 153);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221, 221, 221)));
	color: #333;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	text-shadow: 0px 1px 1px rgba(255,255,255,1);
	line-height: 1;
}

#searchForm{
	margin: 0 auto;
	width:620px;
	padding-top:7px;
}

/**********************************************************************/
/***********Login******************************************************/
/*********************************************************************/
#errorLogin{
    margin-top:10px;
    display:block;
    float:right;
    margin-right:8px;
}
#login{
    width:370px;
    display:block;
    position:absolute;
    top:0;
    right:0;
    padding-top:10px;	
}

#loginbutton{
	margin-top:2px;
	width:75px;
	height:20px;
	margin-left:15px;
	margin-right:5px;
	-webkit-border-radius: 2px 2px;
	border: solid 1px rgb(153, 153, 153);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221, 221, 221)));
	color: #333;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
}	

#email, #password{
        width:120px;
	    height:22px;
		margin-left:15px;
		-webkit-border-radius: 2px 2px;
		border: solid 1px rgb(153, 153, 153);
}

#loginform{
       margin:0 auto;
       width:130px;
       margin-top:100px;
}
#loginDiv h3{
    width:300px;
    text-align:center;
    margin-top:50px;
}
#loginDiv .link{
    width:300px;
    margin-top:110px;
    margin-left:200px;
}
#loginform li { 
       list-style-type:none; 
       float: left;
} 

#reg{
     float:right;
     margin-bottom:10px;
     font-size:18px;
     margin-right:5px;
}
#logout{
    float:right;
    margin-right:5px;
    margin-top:-20px;
    display:block;
}
#logout A{
        color:#00f;
        margin-right:5px;
        float:right;
}
#loggedIn{
    text-align:right;
    position:absolute;
    top:10px;
    right:10px;
}
/***************************************************************/
/******Left*****************************************************/
/***************************************************************/
#left{
    width:220px;
    float:left;
}
#left .wrapper{
    width:200px;
    min-height:50px;
    background-color:#dfdfdf;
    float:left;
    border-style:solid;
    border-width: 1px;
    border-color:#c0c0c0; 
    margin-bottom: 10px;
}
#left .wrapper .content{
    margin:10px;

}
#left .header{
    width:200px;
    height:25px;
    background-color:#575757;
    margin-left:0px;
    margin-bottom:5px;		
}
#left #menu ul{
    list-style:none;
    list-style-image:url(newButton.png); 
    margin-left:15px;
    cursor: pointer;
}
#left #menu li:hover{
    text-decoration: underline;
}
#left #currentPlay #cpLeft,#cpRight{
    width:80px;
    float:left;
}
#left #currentPlay span{
    width:160px;
    display:block;
}
#left #currentPlay span:hover{
    text-decoration: underline;
}
#left #currentPlay #currentTrack, #left #currentPlay #currentPlaylist{
    margin-bottom:10px;
}


/**************************************************************/
/*****Middle***************************************************/
/**************************************************************/
#middle{
    width:590px;
    float:left;
}
#middle .wrapper{
    width:570px;
    min-height:390px;
    background-color:#dfdfdf;
    float:right;
    border-style:solid;
    border-width: 1px;
    border-color:#c0c0c0;
    margin-bottom:10px;
}
#middle .header{
    width:570px;
    height:25px;
    background-color:#575757;
    margin-left:0px;
    margin-bottom:5px;		
}
#middle .wrapper .content{
    margin:10px;
    
}
#middle ul{
    width:260px;
    float:left;
    list-style: none;
    cursor:pointer;
}
#middle #resultResults ul{
    width:100%;
    float:left;
    list-style: none;
    cursor:pointer;
}
#middle li:nth-child(odd){
    background-color: white;
}
#middle .playlist .playlistList ul,#middle #track .playlistList ul{
    margin-bottom:10px;
    width:100%;
}
#middle #results .playlist hr{
    margin-left:0;
}
#selectPlaylist .link{
    position:absolute;
    margin-left:200px;
    margin-top:70px;
}
#middle .artistLeft .avatar{
    height:150px;
    max-width: 200px;
    clear:both;
}
#middle .artistLeft .link{
    float:left;
}
#middle .artistLeft{
    height:200px;
    width:230px;
    float:left;
    padding:10px;
}
#middle .bio{
    overflow:auto;
    height:350px;
}
#middle #albums .content{
    height:360px;
    overflow-y:auto;
}
#middle .albumsItem{
    float:left;
}
#middle .albumsItem ul{
    min-height:150px;
}

#middle .albumsItem h3{
    width:560px;
    text-align: left;
    line-height:20px;
}
#middle .albumsItem li{
    width:350px;
}
#middle .albumLeft{
    width:160px;
    float:left;
}
#middle .albumsItem .avatar{
    width:150px;
    float:left;

}

#middle #album li{
    width:310px;
}
#middle #track #nextSong{
    float:right;
}
#middle #statistics .title{
    text-align: center;
}
#middle #statistics ul{
    float:left;
}
#middle #statistics .statBar li, #middle #statistics .genres li{
    background-color:#DFDFDF;
    cursor:default;
    margin-bottom:10px;
}
#middle #statistics li:hover{
    text-decoration:none;
}
#middle #statistics .genres{
    margin-left:20px;
    
    width:100px;
    margin-right:20px;
    border-right:1px solid black;
}
#middle #statistics .statBar li{
    background-color: #575757;
    text-align:center;
    color:white;
}
#middle #statistics #globalStat{
    width:100%;
    float:left;
    margin-bottom:20px;
}
#middle #statistics #userStat{
    width:100%;
    float:left;
    margin-bottom:20px;
}
#middle #statistics #statisticsInfo{
    float:left;
    margin:10px;
}
#middle #recArtists ul{
    margin-bottom:10px;
}
/**************************************************************/
/*****Right****************************************************/
/**************************************************************/
#right{
    width:220px;
    float:left;
}
#right .wrapper{
    width:200px;
    min-height:50px;
    background-color:#dfdfdf;
    float:right;
    border-style:solid;
    border-width: 1px;
    border-color:#c0c0c0;
}
#right .header{
    width:200px;
    height:25px;
    background-color:#575757;
    margin-left:0px;
    margin-bottom:5px;		
}
#right #loadingContent ul{
    list-style-image: url(newButton.png);
    margin-left:30px;
}
#listSuggestions li ul{
   list-style-image: url(newButton.png);
   padding-top:4px;
}

#suggestions .info{
    float:left;
    margin-right:5px;
    width:120px;
    margin-bottom:5px;
	overflow: auto;
}
#suggestions ul{
    list-style:none;
}

#suggestions ul li span{
    font: normal bold 15px 'Lucida Grande', 'Myriad Pro', Helvetica, Arial, Geneva, Verdana, sans-serif;
    color:#0A122A;
}

#suggestions ul li ul{
    margin-left:8px;
}
#suggestions ul li ul span{
    font: normal bold 14px 'Lucida Grande', 'Myriad Pro', Helvetica, Arial, Geneva, Verdana, sans-serif;
    margin-bottom:5px;
    color:#0B0B61;
}

#suggestions ul li ul li{
    margin-left:18px;
}

#suggestions ul li{
    padding-bottom:5px;
    text-align:left;
    width:180px;
}

#suggestions ul li span:hover{
    text-decoration: underline;
    cursor:pointer;
}

#suggestions ul li ul img{
    float:left;
    margin-right:1px;
    paddin-left:5px;
}

#listSuggestions{
    float:left;
    margin-left:8px;
    padding-bottom:5px;
    text-align:left;
    width:180px;
    height:40px;
    list-style:none;
}

#listSuggestions span:hover{
    text-decoration: underline;
    cursor:pointer;
}


/**************************************************************/
/****Bottom****************************************************/
/**************************************************************/



#bottom{
  position: relative;
  bottom:0px;
  border-bottom-color:#000000;
  border-bottom-style:solid;
  border-bottom-width:1px;;	
  height:25px;
  margin-left:auto;
  margin-right:auto;
  background-image:url(http://kineticshadows.com/css/images/tile-portfolio.png);
  text-align: center;
}

#bottom span{
    line-height: 25px;
    font-family: 'Courier new';
    margin:0 auto;
    color:grey;
}

#bottom {
    position:fixed;
    width:100%;
    text-align:center;
}


/********************************************************************/
/****Rating****************************************************/
/********************************************************************/
#stars{
    width:125px;
    margin:0 auto;
    text-align:center;
}
#stars ul{
    width:125px;
}
.star-rating{
        list-style:none;
        margin-left:5px !important;
        padding:0px;
        width: 125px;
        height: 25px;
        position: relative;
        background: url(alt_star.gif) top left repeat-x;
}
.star-rating li{
        padding:0px;
        margin:0px;
        /*\*/
        float: left;
        /* */
}
.star-rating li a{
        display:block;
        width:25px;
        height: 25px;
        text-decoration: none;
        text-indent: -9000px;
        z-index: 20;
        position: absolute;
        padding: 0px;
}
.star-rating li a:hover{
        background: url(alt_star.gif) left bottom;
        z-index: 2;
        left: 0px;
}
.star-rating a:focus,
.star-rating a:active{
        border:0;
        -moz-outline-style: none;
        outline: none;
}
.star-rating a.one-star{
        left: 0px;
}
.star-rating a.one-star:hover{
        width:25px;
}
.star-rating a.two-stars{
        left:25px;
}
.star-rating a.two-stars:hover{
        width: 50px;
}
.star-rating a.three-stars{
        left: 50px;
}
.star-rating a.three-stars:hover{
        width: 75px;
}
.star-rating a.four-stars{
        left: 75px;
}
.star-rating a.four-stars:hover{
        width: 100px;
}
.star-rating a.five-stars{
        left: 100px;
}
.star-rating a.five-stars:hover{
        width: 125px;
}
.star-rating li.current-rating{
        background: url(alt_star.gif) left center;
        position: absolute;
        height: 25px;
        display: block;
        text-indent: -9000px;
        z-index: 1;
}
/*************************************************************************/
/*********loading*********************************************************/
/*************************************************************************/
.loading{
    display:block;
    width:150px;
    font-style:italic;

}
.loading img{

    padding-left: 5px;
}
/**********************************************************************/
/******popup***********************************************************/
/**********************************************************************/
.popupt{
    display:none;width:300px;height:300px;position:absolute;background-color:#EEE;z-index:9002;
}
#blanket{
    display:none;
    background-color:#111;
    opacity: 0.65;
    filter:alpha(opacity=65);
    position:absolute;
    z-index: 9001;
    top:0px;
    left:0px;
    width:100%;
}
#styleSelectPlaylist{
    width:200px;margin:0 auto; margin-top:80px;
}
#styleSelectPlaylist input{
    margin-left:0;
    width:220px;
}
#styleSelectPlaylist select{
    width:220px;
}